<template>
    <div class="container">
        <nav class="navbar navbar-dark bg-primary">
            <a class="navbar-brand left pl-5" href="#">添加文章</a>
            <a class="navbar-brand left pl-5" href="#" @click="fanhui">返回文章</a>
        </nav>
        <div>
            <label label for="exampleFormControlInput1" class="form-label">添加标题</label>
            <input type="text" class="form-control" v-model="newList.title" id="exampleFormControlInput1" placeholder="请添加标题添加标题(title)">
        </div>
        <div>
            <label for="exampleFormControlTextarea1" class="form-label">添加内容</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" v-model="newList.content" rows="5" placeholder="请添加文章内容(description)"></textarea>
        </div>
        <div class="mt-5">
            <button type="button" class="btn btn-outline-primary" @click="addList">添加文章</button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref } from 'vue'
import { useStore } from 'vuex'
import router from '../../router'
export default defineComponent({
    setup (props,content) {
        const store = useStore()
        const newList = reactive({
            id:5,
            title:'',
            content:'',
            avatar: 'https://i02piccdn.sogoucdn.com/cac1fe8d3eddabbc',
        })
        // 添加事件 上传文章
        const addList = () => {
            // id+1
            newList.id+=1
            // 如果它们都不为空，就添加并跳转
            if(newList.title!=='' && newList.content!==''){
                // 获取状态栏的state的contentlist并添加一个列表
                store.state.contentlist.push({
                    id:newList.id,
                    title:newList.title,
                    description:newList.content,
                    avatar:newList.avatar
                })
                // 自动跳转到上一页
                router.push('/')
            }
            // 清空两个输入框
            newList.title = ''
            newList.content = ''
        }
        // 返回显示文章的路由
        const fanhui = () => {
            router.go(-1)
        }
        return {
            newList,
            addList,
            fanhui
        }
    }
})
</script>

<style scoped>
    .left{
        padding-left: 30px;
    }
</style>
